const app = getApp();
// 颜色格式 hex 转 rgba
const hexToRgba = (bgColor, opacity) => {
  let color = bgColor.slice(1); // 去掉'#'号
  let rgba = [
    parseInt('0x' + color.slice(0, 2)),
    parseInt('0x' + color.slice(2, 4)),
    parseInt('0x' + color.slice(4, 6)),
    opacity
  ];
  return 'rgba(' + rgba.toString() + ')';
};

// rpx -转px
const getPx = function (data) {
  var systemInfo = wx.getSystemInfoSync();
  const params = data.toString()
  var px = params.indexOf('rpx') > 0 ? parseInt(params) / 750 * systemInfo.screenWidth : params / 750 * systemInfo.screenWidth;
  return px
}
Component({
  options: {
    multipleSlots: true
  },
  externalClasses: ['nav_title'],
  properties: {
    showNav: { //判断是否显示左上角的按钮 -还没做   
      type: Boolean,
      value: false
    },
    showHome: { //判断是否显示左上角的home按钮 -还没做
      type: Boolean,
      value: false
    },
    textPositon: {
      type: String,
      value: 'center'
    },
    text: { //必传
      type: String
    },
    textColr: {
      type: String,
      value: '#fff'
    },
    navBg0: {
      type: String,
      value: 'https://hd-custom.oss-cn-beijing.aliyuncs.com/cdn/images/app/imgs/image/home/h1bg0.png'
    },
    navBg: {
      type: String,
      value: 'https://hd-custom.oss-cn-beijing.aliyuncs.com/cdn/images/app/imgs/image/home/h1bg1.png'
    },
    showBg: {
      type: Boolean,
      value: true
    },
    isneedOpacity: {
      type: Boolean,
      value: false,
      observer(val) {
        if (val) {
          this.setData({
            opacity: 0
          })
        }
      }
    },
    alwaysTitle: {
      type: Boolean,
      value: false
    },
    navColor: { //必传
      type: Array,
      value: ['#E72410', '#0F9FE9'], //转-->rgba(41, 159, 241, 1)
      observer(val) {
        if (!val) return;
        var bgGradient;
        if (val.length === 1) {
          bgGradient = `background:${val[0]};`
        } else if (val.length === 2) {
          bgGradient = `background:linear-gradient(180deg, ${val[0]} 0%, ${val[1]} 100%);`
        }
        // console.log(bgGradient)
        this.setData({
          bgGradient
        })
      }
    }
  },
  data: {
    // showNav: true,     //判断是否显示左上角的home按钮
    // showHome: true,     //判断是否显示左上角的按钮
    // vurNavColor:'' //渐变navColr颜色
    opacity: 1,
    fixMenuRight: getPx(32)
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {
      this.setData({
        navHeight: app.globalData.navBarHeight,
        menuRight: app.globalData.menuRight,
        menuBotton: app.globalData.menuBotton,
        menuHeight: app.globalData.menuHeight
      })
    }
  },
  methods: {
    //回退 -可以做特殊处理了
    navBack() {
      wx.navigateBack()
    },
    //回主页
    navHome: function () {

    },
    // 设置颜色--第二个参数为渐变的距离
    setOpacity: function (scrollTop, maxTop = (this.data.navHeight + 5)) {
      var opacity = 0;
      if (scrollTop <= maxTop) {
        opacity = scrollTop / maxTop
      } else {
        opacity = 1
      }
      var curNavColor;
      if (this.properties?.navColor[0]) {
        curNavColor = hexToRgba(this.properties.navColor[0], opacity)
      }
      // console.log(curNavColor)
      this.setData({
        opacity,
        curNavColor
      })
      /*
          配套使用： 
         onPageScroll: function (e) { //高度不能设置 100%或者 100vh
          var scrollTop = e.scrollTop
          navigationBar.setOpacity(scrollTop) //his.selectComponent("#navigationBar")组件实例
           },
      */
    }
  }
})


// navBarHeight: 0, // 导航栏高度
// menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
// menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
// menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）